//ajax 是一个概率  Asynchronous Javascript And XM （异步JavaScript和XML） aiox是一个流行的库   fetch是一个api的请求方法

/**手写一个ajax请求 */

type ParamsType = {
    url:string,
    methods: 'GET' | 'POST',
    data:{
        [key:string]:any
    },
    timeout:number,
    success?:(res:any)=>void
    fail?:(err:any)=>void
}

const myAjax = (param:ParamsType)=>{
    let xhr:any;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest()
    }else{
        xhr = new ActiveXObject('Micosoft.XMLHTTP')
    }

    /**
     * @description  处理请求参数的函数
     */

    const objToString = (obj:any) =>{
        let paramsarr:string[] = []
        for(let key in obj){
            const val = obj[key]
            let paramstr = `${key}=${val}`
            paramsarr.push(paramstr)
        }
        return paramsarr.join('&')
    }

    /**发送请求 */
    if(param.methods.toLocaleLowerCase() == 'get'){
        //点三个参数表示是否是异步的情况 true  表示的是异步的调用
        xhr.open('GET',`${param.url}?${objToString(param.data)}`,true)
    }else if(param.methods.toLocaleLowerCase() == 'post'){
        xhr.open('POST',param.url,true)
        xhr.setRequestHeader('Content-type', 'application/json')
        xhr.send(JSON.stringify(param.data || {}) )
    }else{
        xhr.open(param.methods,param.url,true)
        xhr.setRequestHeader('Content-type', 'application/json')
        xhr.send(objToString(param.data) )
    }

    /** 接收回调 */
    xhr.onreadystatechange = ()=>{
        if(xhr.readystate == 4){
            if(xhr.status === 200){
                param.success!(xhr.responseText)
            }else{
                param.fail!(xhr.responseText)
            }
        }
    }

}
/**
 * 
 * 对于ajax   主要是通过XMLHttpsRequest或者 XMLXObjext 创建xhr对象  然后通过xhr.open(ttype,data,boolean)进行参数的传递 post的请求通过xhr.send进行字符串的传递
 * 然后通过xhr.onreadystatechaneg监听数据的返回   如果 xhr的readstates等于4的时候表示（整个请求过程已完成，且响应已就绪）可以进行下一步   通过判断xhr.status === 200 表示是否成功返回   返回的
 * 用xhr.responseText或者 xhr.responseJson传递给前端使用
 */


